<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/dg.css">

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/Swiper/4.5.0/js/swiper.min.js"></script>
    <link href="https://cdn.bootcss.com/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet">
</head>

<body>
    <!-- 头部 -->
    <div class="dg">
        <div class="dg-a">
            <div class="dg-b"></div>
            <div class="dibiao">
                <div class="dibiao-a"></div>
                <div class="diqu">上海</div>
            </div>
            <div class="dg-zhong"></div>
            <div class="dg-right">
                <div class="dg-right-a"></div>
                <div class="dg-right-gw"></div>
            </div>
        </div>
    </div>
    <!-- 大圣 -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="img/89902fbb678d9c2fad4f22cc4c36deb6.jpg" alt=""></div>
            <div class="swiper-slide"><img src="img/f3e219a334d8db2ff7537ab4566e8e79.png" alt=""></div>
            <div class="swiper-slide"><img src="img/f84e4a45008db328a12fe3379e231ede.jpg" alt=""></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <script>
            var mySwiper = new Swiper('.swiper-container', {
                autoplay: true,
                loop: true, // 循环模式选项
                effcut: "cube",

                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                },


            })
        </script>
    </div>
    <div class="shou">
        <!-- 首单 -->
        <ul class="zheng">
            <li>
                <div class="linxing"></div>
                <div class="ren">新人首单赠小切快</div>
            </li>
            <li>
                <div class="linxing"></div>
                <div class="ren">满100包邮</div>
            </li>
            <li>
                <div class="linxing"></div>
                <div class="ren">全程冷链配送</div>
            </li>
        </ul>
        <ul class="kh">
            <li><img src="img/b24fa9c0d277b79493fead122afe8e73.png" alt="">
                <div class="kh-a">蛋糕</div>
            </li>

            <li><img src="img/7dd9f161ea87f4d44f7a506a8c08100e.png" alt="">
                <div class="kh-a">面包</div>
            </li>

            <li><img src="img/dda23404c8cba348580acd684114ade3.png" alt="">
                <div class="kh-a">下午茶</div>
            </li>
            <li><img src="img/6d777e1d3aa1681d58ea1640f53e2920.png" alt="">
                <div class="kh-a">企业专区</div>
            </li>
        </ul>
        <!-- 新品 -->
        <div class="xinpin">
            <div class="xinpin-a">
                <div class="xinpin-left">新品</div>
                <div class="xinpin-right">更多></div>
            </div>
            <ul class="keke">
                <li class="keke-a">
                    <img src="img/bb595449676219a0ef195fc8cc5a2388.jpg">
                    <div class="kek-b">
                        <div class="dao">
                            <div class="dao-b">可可岛</div>
                            <div class="dao-a">298<span class="bang">元/1.0榜</span></div>
                        </div>
                        <div class="keke-gouwu"></div>
                        <div class="cuntian">隐藏的春天的 岛屿</div>
                    </div>
                </li>
                <li class="keke-a">
                    <img src="img/bb595449676219a0ef195fc8cc5a2388.jpg">
                    <div class="kek-b">
                        <div class="dao">
                            <div class="dao-b">可可岛</div>
                            <div class="dao-a">298<span class="bang">元/1.0榜</span></div>
                        </div>
                        <div class="keke-gouwu"></div>
                        <div class="cuntian">隐藏的春天的 岛屿</div>
                    </div>
                </li>
                <li class="keke-a">
                    <img src="img/bb595449676219a0ef195fc8cc5a2388.jpg">
                    <div class="kek-b">
                        <div class="dao">
                            <div class="dao-b">可可岛</div>
                            <div class="dao-a">298<span class="bang">元/1.0榜</span></div>
                        </div>
                        <div class="keke-gouwu"></div>
                        <div class="cuntian">隐藏的春天的 岛屿</div>
                    </div>
                </li>
                <li class="keke-a">
                    <img src="img/bb595449676219a0ef195fc8cc5a2388.jpg">
                    <div class="kek-b">
                        <div class="dao">
                            <div class="dao-b">可可岛</div>
                            <div class="dao-a">298<span class="bang">元/1.0榜</span></div>
                        </div>
                        <div class="keke-gouwu"></div>
                        <div class="cuntian">隐藏的春天的 岛屿</div>
                    </div>
                </li>
                <li class="keke-a">
                    <img src="img/bb595449676219a0ef195fc8cc5a2388.jpg">
                    <div class="kek-b">
                        <div class="dao">
                            <div class="dao-b">可可岛</div>
                            <div class="dao-a">298<span class="bang">元/1.0榜</span></div>
                        </div>
                        <div class="keke-gouwu"></div>
                        <div class="cuntian">隐藏的春天的 岛屿</div>
                    </div>
                </li>
                <li class="keke-a">
                    <img src="img/bb595449676219a0ef195fc8cc5a2388.jpg">
                    <div class="kek-b">
                        <div class="dao">
                            <div class="dao-b">可可岛</div>
                            <div class="dao-a">298<span class="bang">元/1.0榜</span></div>
                        </div>
                        <div class="keke-gouwu"></div>
                        <div class="cuntian">隐藏的春天的 岛屿</div>
                    </div>
                </li>
                <li class="keke-a">
                    <img src="img/bb595449676219a0ef195fc8cc5a2388.jpg">
                    <div class="kek-b">
                        <div class="dao">
                            <div class="dao-b">可可岛</div>
                            <div class="dao-a">298<span class="bang">元/1.0榜</span></div>
                        </div>
                        <div class="keke-gouwu"></div>
                        <div class="cuntian">隐藏的春天的 岛屿</div>
                    </div>
                </li>
                <li class="keke-a">
                    <img src="img/bb595449676219a0ef195fc8cc5a2388.jpg">
                    <div class="kek-b">
                        <div class="dao">
                            <div class="dao-b">可可岛</div>
                            <div class="dao-a">298<span class="bang">元/1.0榜</span></div>
                        </div>
                        <div class="keke-gouwu"></div>
                        <div class="cuntian">隐藏的春天的 岛屿</div>
                    </div>
                </li>
                <li class="keke-a">
                    <img src="img/bb595449676219a0ef195fc8cc5a2388.jpg">
                    <div class="kek-b">
                        <div class="dao">
                            <div class="dao-b">可可岛</div>
                            <div class="dao-a">298<span class="bang">元/1.0榜</span></div>
                        </div>
                        <div class="keke-gouwu"></div>
                        <div class="cuntian">隐藏的春天的 岛屿</div>
                    </div>
                </li>
                <li class="keke-a">
                    <img src="img/bb595449676219a0ef195fc8cc5a2388.jpg">
                    <div class="kek-b">
                        <div class="dao">
                            <div class="dao-b">可可岛</div>
                            <div class="dao-a">298<span class="bang">元/1.0榜</span></div>
                        </div>
                        <div class="keke-gouwu"></div>
                        <div class="cuntian">隐藏的春天的 岛屿</div>
                    </div>
                </li>
            </ul>
            <!-- 活动 -->
            <div class="huodong">
                <div class="dong">
                    <div class="yike">廿一客·活动</div>
                </div>
                <div class="quan">
                    <div class="quanyi-left">
                        <div class="quanyi-left-a">新客权益</div>
                        <div class="cha">点击查看</div>
                        <div class="tianshu">只剩270天</div>
                    </div>
                    <div class="zhuanxiang-a"></div>
                </div>
            </div>
            <!-- 廿一客·文章 -->
            <div class="wen-a">
                <div class="wen-b"><span class="z">廿一客·文章</span></div>
                <div class="zi">
                    <div class="h-a">
                        <div class="h">
                            <div class="h-left">
                                <img src="img/de4d836fcd4d164ab51dca2a9701ecb8.jpg" alt="">
                                <div style="font-size:16px;">冬季刊·进博会</div>
                            </div>
                            <div class="h-left">
                                <img src="img/de4d836fcd4d164ab51dca2a9701ecb8.jpg" alt="">
                                <div style="font-size:16px;">冬季刊·进博会</div>
                            </div>
                            <div class="h-left">
                                <img src="img/de4d836fcd4d164ab51dca2a9701ecb8.jpg" alt="">
                                <div style="font-size:16px;">冬季刊·进博会</div>
                            </div>
                            <div class="h-left">
                                <img src="img/de4d836fcd4d164ab51dca2a9701ecb8.jpg" alt="">
                                <div style="font-size:16px;">冬季刊·进博会</div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>

    </div>
    <div class="quanzhan">
        <ul class="quanzhan-a">
            <li class="sheng">下载APP</li>
            <li class="sheng">下载APP</li>
            <li class="sheng">下载APP</li>
            <li class="sheng">下载APP</li>           
        </ul>
        <div class="ban">
            <p>Copyright© 21Cake蛋糕官网商城 2007-2017, </br>京ICP备14006254号-1 </br>网站注册公司名称: 北京廿一客食品有限公司</p>
        </div>
    </div>

</body>

</html>